import {
    AfterContentInit,
    Component,
    ElementRef,
    EventEmitter, HostListener,
    Input,
    OnDestroy,
    OnInit,
    Output,
    Renderer2,
    ViewChild,
    ViewContainerRef
} from '@angular/core';
import {MapPluginsService} from '../service/map-plugins.service';
import {MapService} from '../service/map.service';
import {SbMap} from '../bean/SbMap';
import {timer} from 'rxjs';

@Component({
    selector: 'base-map',
    templateUrl: './base-map.component.html',
    styleUrls: ['./base-map.component.less']
})
export class BaseMapComponent implements OnInit, OnDestroy, AfterContentInit {

    @ViewChild('panels', {read: ViewContainerRef, static: true})
    container: ViewContainerRef;

    map: SbMap;
    @Output()
    initFinish = new EventEmitter();

    constructor(private mapService: MapService,
                private mapPluginsService: MapPluginsService,
                private elementRef: ElementRef,
                private renderer2: Renderer2
    ) {
    }

    _width: number | string = '100%';

    get width() {
        return this._width;
    }

    @Input()
    set width(width: number | string) {
        this._width = width;
    }

    _height: number | string = '100%';

    get height() {
        return this._height;
    }

    @Input()
    set height(height: number | string) {
        this._height = height;
    }

    ngOnInit() {
        this.map = this.mapService.createDefaultMap();
        // let div = this.renderer2.createElement("div");
        // // debugger;
        // this.renderer2.addClass(div, "map");
        // this.renderer2.appendChild(this.elementRef.nativeElement, div);

        // this.map.on('pointermove', (evt: MapBrowserEvent) => {
        //     //    debugger;
        // });
        // // 添加事件
        // this.map.on('singleclick', (evt: MapBrowserEvent) => {
        //     debugger;
        // });
    }

    ngAfterContentInit() {
        const mapElement = this.elementRef.nativeElement.querySelector('.map');
        this.map.setTarget(mapElement);
        this.sizeChange();

        this.mapPluginsService.setMapContainer(this.container);
        // if (this.showLayerChange) {
        //     this.mapPluginsService.loadComponent(LayerChangeComponent);
        // }
        // if (this.showMapZoom) {
        //     this.mapPluginsService.loadComponent(MapZoomComponent);
        // }
        // this.mapPluginsService.loadComponent(TopRightToolbarComponent);

        this.initFinish.emit(this);
    }

    public updateSize(): void {
        if (this.map) {
            this.map.updateSize();
        }
    }

    @HostListener('window:resize', [])
    sizeChange(): void {
        // const e: HTMLElement = this.elementRef.nativeElement;
        // this.mapHeight = this.doc.body.clientHeight - e.getBoundingClientRect().top - 10;
        timer(100).subscribe(_ => {
            this.updateSize();
        });
    }

    ngOnDestroy(): void {
        this.map.setTarget(null);
        this.mapPluginsService.setMapContainer(null);
    }
}
